<!DOCTYPE html>
<head>
    <meta charset="utf-8"/>
    <title>{% block title %} {% endblock %} </title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>

    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    {% load staticfiles %}
    <link href="{% static 'plugins/jquery-ui/themes/base/minified/jquery-ui.min.css' %}" rel="stylesheet"/>
    <link href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet"/>
    <link href="{% static 'plugins/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet"/>
    <link href="{% static 'css/style.min.css' %}" rel="stylesheet"/>
    <link href="{% static 'css/style-responsive.min.css' %}" rel="stylesheet"/>
    <link href="{% static 'css/sweetalert.css' %}" rel="stylesheet"/>
    <link href="{% static 'css/theme/default.css' %}" rel="stylesheet"/>
    <!-- ================== END BASE CSS STYLE ================== -->

    <!-- ================== BEGIN BASE JS ================== -->
    <script src="{% static 'plugins/pace/pace.min.js' %}"></script>
    <script src="{% static 'js/sweetalert.min.js' %}"></script>
    <!-- ================== END BASE JS ================== -->
    {% block css %}{% endblock %}
</head>
<body>
{% block body %}
    <!-- begin #page-loader -->
    <div id="page-loader" class="fade"><span class="spinner"></span></div>
    <!-- end #page-loader -->

    <!-- begin #page-container -->
    <div id="page-container" class="fade in page-sidebar-fixed page-header-fixed">

        <!-- begin #header -->
        <div id="header" class="header navbar navbar-default navbar-fixed-top">
            <!-- begin container-fluid -->
            <div class="container-fluid">
                <!-- begin mobile sidebar expand / collapse button -->
                <div class="navbar-header">
                    <a href="/" class="navbar-brand"><span class="navbar-logo"></span>随手记</a>
                    <button type="button" class="navbar-toggle" data-click="sidebar-toggled">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!-- end mobile sidebar expand / collapse button -->

                <!-- begin header navigation right -->
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="javascript:;" data-toggle="dropdown"
                           class="dropdown-toggle f-s-14">
                            <i class="fa fa-bell-o"></i>
                            <span class="label">5</span>
                        </a>
                        <ul class="dropdown-menu media-list pull-right">
                            <li class="dropdown-header">消息提醒</li>
                            <li class="media">
                                <a href="javascript:;">
                                    <div class="pull-left media-object bg-red"><i
                                            class="fa fa-bug"></i></div>
                                    <div class="media-body">
                                        <h6 class="media-heading">Server Error
                                            Reports</h6>

                                        <div class="text-muted">3 minutes ago
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="dropdown-footer text-center">
                                <a href="javascript:;">View more</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown navbar-user">
                        <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="{% static 'img/user-13.jpg' %}" alt=""/>
                            <span class="hidden-xs">{{ request.user.username }}</span> <b
                                class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="arrow"></li>
                            <li><a href="{% url 'logout' %}">退出</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- end header navigation right -->

            </div>
            <!-- end container-fluid -->
        </div>
        <!-- end #header -->

        <!-- begin sidebar nav -->
        <div id="sidebar" class="sidebar">
            <!-- begin sidebar scrollbar -->
            <div data-scrollbar="true" data-height="100%">
                <!-- begin sidebar nav -->
                <ul class="nav">
                    <li class="nav-header">导航</li>
                    <li id="user" class="has-sub">
                        <a href="javascript:" id="User">
                            <b class="caret pull-right"></b>
                            <i class="fa fa-home"></i>
                            <span>用户中心</span>
                        </a>
                        <ul class="sub-menu">
                            <li id="account" class="has-sub"><a href="#"> 账户管理 </a></li>
                            <li id="profile" class="has-sub"><a href="#"> 个人资料 </a></li>
                            <li id="notification"><a href="#"> 消息中心 </a></li>
                        </ul>
                    </li>
                    <li id="analysis" class="has-sub">
                        <a href="#">
                            <i class="fa fa-file-o"></i>
                            <span>数据分析</span>
                        </a>
                    </li>
                    <li id="order_records" class="has-sub">
                        <a href="#">
                            <i class="fa fa-file-o"></i>
                            <span>个人支出</span>
                        </a>
                    </li>
                    <li id="api_records" class="has-sub">
                        <a href="#">
                            <i class="fa fa-area-chart"></i>
                            <span>个人收入</span>
                        </a>
                    </li>
                    <li id="community" class="has-sub">
                        <a href="#">
                            <i class="fa fa-cogs"></i>
                            <span>社区</span>
                        </a>
                    </li>
                    <li id="extra" class="has-sub">
                        <a href="javascript:">
                            <b class="caret pull-right"></b>
                            <i class="fa fa-home"></i>
                            <span>额外应用</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li id="quickpay-alipay"><a href="#"> 支付宝快捷充值 </a></li>
                            <li id="quickpay-wechat"><a href="#"> 微信快捷充值 </a></li>
                        </ul>
                    </li>

                    <!-- begin sidebar minify button -->
                    <li><a href="#" class="sidebar-minify-btn"
                           data-click="sidebar-minify"><i
                            class="fa fa-angle-double-left"></i></a></li>
                    <!-- end sidebar minify button -->
                </ul>
                <!-- end sidebar nav -->
            </div>
            <!-- end sidebar scrollbar -->
        </div>
        <div class="sidebar-bg"></div>
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb pull-right">
                {% block page_nav %} {% endblock %}
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">{% block page_title %} {% endblock %}</h1>
            <!-- end page-header -->
            {% block page_body %} {% endblock %}

        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
           data-click="scroll-top"><i
                class="fa fa-angle-up"></i></a>
        <!-- end scroll to top btn -->
    </div>
    <!-- end page container -->

    <!-- begin #footer -->
    <div id="footer" class="footer">
        &copy; Copyright 2012 - 2016
    </div>
    <!-- end #footer -->
{% endblock %}

<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="{% static 'js/apps.min.js' %}"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<!-- ================== BEGIN BASE JS ================== -->
<script src="{% static 'plugins/jquery/jquery-1.9.1.min.js' %}"></script>
<script src="{% static 'plugins/jquery/jquery-migrate-1.1.0.min.js' %}"></script>
<script src="{% static 'plugins/jquery-ui/ui/minified/jquery-ui.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'crossbrowserjs/html5shiv.js' %}"></script>
<script src="{% static 'crossbrowserjs/respond.min.js' %}"></script>
<script src="{% static 'crossbrowserjs/excanvas.min.js' %}"></script>
<script src="{% static 'plugins/slimscroll/jquery.slimscroll.min.js' %}"></script>
<script src="{% static 'plugins/jquery-cookie/jquery.cookie.js' %}"></script>
<script>
    $('#User').click(function () {
        if ($('.page-sidebar-minified').length === 0) {
            var target = $(this).next('.sub-menu');
            $(target).slideToggle(250);
        }
    });

    $('[data-click=sidebar-minify]').click(function (e) {
        e.preventDefault();
        var sidebarClass = 'page-sidebar-minified';
        var targetContainer = '#page-container';
        $('#sidebar [data-scrollbar="true"]').css('margin-top', '0');
        $('#sidebar [data-scrollbar=true]').stop();
        if ($(targetContainer).hasClass(sidebarClass)) {
            $(targetContainer).removeClass(sidebarClass);
            if ($(targetContainer).hasClass('page-sidebar-fixed')) {
                if ($('#sidebar .slimScrollDiv').length !== 0) {
                    $('#sidebar [data-scrollbar="true"]').slimScroll({destroy: true});
                    $('#sidebar [data-scrollbar="true"]').removeAttr('style');
                }
                generateSlimScroll($('#sidebar [data-scrollbar="true"]'));
                $('#sidebar [data-scrollbar=true]').trigger('mouseover');
            } else if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                if ($('#sidebar .slimScrollDiv').length !== 0) {
                    $('#sidebar [data-scrollbar="true"]').slimScroll({destroy: true});
                    $('#sidebar [data-scrollbar="true"]').removeAttr('style');
                }
                generateSlimScroll($('#sidebar [data-scrollbar="true"]'));
            }
        } else {
            $(targetContainer).addClass(sidebarClass);

            if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                if ($(targetContainer).hasClass('page-sidebar-fixed')) {
                    $('#sidebar [data-scrollbar="true"]').slimScroll({destroy: true});
                    $('#sidebar [data-scrollbar="true"]').removeAttr('style');
                }
                $('#sidebar [data-scrollbar=true]').trigger('mouseover');
            } else {
                $('#sidebar [data-scrollbar="true"]').css('overflow', 'visible');
            }
        }
        $(window).trigger('resize');
    });
</script>
<!-- ================== END BASE JS ================== -->
{% block js %}
{% endblock %}
</body>
</html>
